<template>
	<div class="mobile-search">
		<router-link to="/mobile/home">返回</router-link>
		<form @submit.prevent="setSearch()">
			<input type="search" placeholder="输入书名与作者" v-model="keywords" />
			<input type="submit" value="搜索" />
		</form>
		<button>全部清空</button>
		<div class="history">
			<span v-for="(item,i) in hlist" :key="i">{{item}}</span>
		</div>
	</div>
</template>

<script>
	//导入vuex的对象

	import {
		mapActions,
		mapState
	} from 'vuex'
	export default {
		name: 'MobileSearch',
		data() {
			return {
				keywords: '',
				historyList: [],
			}
		},
		computed: {
			...mapState('search', ['hlist']),
		},
		methods: {
			//格式：moaActions('模块名',[调用方法])
			...mapActions('search', ['actionHistory']),
			setSearch() {
				//调用search模块的函数actiomHistory，并将当前组件的data数据传递过去vuex
				this.actionHistory(this.keywords)
				this.keywords = ''
			}
		}
	}
</script>

<style>
</style>